<template>
  <div class="order-detail-container">
    <!-- 步骤条 -->
    <el-steps :active="currentStep" finish-status="success" simple style="margin-bottom: 20px;">
      <el-step title="待确认"></el-step>
      <el-step title="待发货"></el-step>
      <el-step title="运输中"></el-step>
      <el-step title="待结算"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>

    <!-- 订单详情表单 -->
    <el-form :model="order" label-width="120px" label-position="left" class="custom-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input v-model="order.orderId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model="order.createTime" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input v-model="order.goods" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单价">
            <el-input v-model="order.price" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品数量">
            <el-input v-model="order.quantity" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单状态">
            <el-input v-model="order.status" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="预付金额">
            <el-input v-model="order.prepay" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="剩余待付">
            <el-input v-model="order.remaining" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="订单总金额">
            <el-input v-model="order.total" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="收货人">
            <el-input v-model="order.receiver" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="formattedPhone" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="收货地址">
            <el-input type="textarea" v-model="order.address" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input type="textarea" v-model="order.description" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注信息">
            <el-input type="textarea" v-model="order.remark" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep:2, // 假设当前步骤为待确认
      order: {
        orderId: 'ORD123456789',
        phone: '13800138000',
        createTime: '2023-10-01 10:00',
        goods: '笔记本电脑',
        quantity: 1,
        price: '8000',
        prepay: '4000',
        remaining: '4000',
        total: '8000',
        status: '运输中',
        receiver: '李明',
        address: '北京市海淀区XX路XX号',
        description: '高性能笔记本电脑，用于办公',
        remark: '请尽快发货'
      }
    };
  },
  computed: {
    formattedPhone() {
      return this.order.phone.slice(0, 3) + '****' + this.order.phone.slice(7);
    }
  }
};
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
}

.custom-form {
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.el-textarea {
  width: 100%;
}
</style>